<template>
  <div>
    <div v-if="type == 'input'">
      <input type="text" v-model="ipt" v-maxlength="maxlength" />
      <span>0/{{maxlength}}</span>
    </div>
    <div v-if="type == 'textarea'">
      <!-- <input type="text" v-model="ipt" v-maxlength="maxlength" /> -->
      <textarea name id cols="30" rows="10" v-model="ipt" v-maxlength="maxlength"></textarea>
      <span>0/{{maxlength}}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      default: "input",
      type: String
    },
    maxlength: {
      default: "20",
      type: [String, Number]
    }
  },
  data() {
    return {
      ipt: ""
    };
  },
  directives: {
    maxlength: {
      inserted(el, binding) {
        el.setAttribute("maxlength", binding.value);
      },
      update(el, binding) {
        el.nextElementSibling.innerHTML = el.value.length + "/" + binding.value;
        if (el.value.length == binding.value) {
          el.style = "color:red";
        } else {
          el.style = "color:block";
        }
      }
    }
  }
};
</script>

<style>
</style>